<template>
  <dv-full-screen-container class="container">
    <div class="box left">

      <dv-border-box-8 class="border-box">
        <div class="chart-text">近1天交易金额排名前10股票平台</div>
        <dv-scroll-board :config="config6" class="charts" style="height:300px" />
      </dv-border-box-8>
      <dv-border-box-9 class="border-box">
        <dv-decoration-7 class="decoration ">近1天信息</dv-decoration-7>
        <div class="chart-text">
          总交易金额:
          <span class="data-box">{{ allData.data10[1] + '元' || '无数据' }}</span>
        </div>
        <div class="chart-text">
          交易数量:
          <span class="data-box">{{ allData.data10[2] + '单' || '无数据' }}</span>
        </div>
        <div class="chart-text">
          买入交易量:
          <span class="data-box">{{ allData.data12[1] + '单' || '无数据' }}</span>
        </div>
        <div class="chart-text">
          卖出交易量:
          <span class="data-box">{{ allData.data12[2] + '单' || '无数据' }}</span>
        </div>
      </dv-border-box-9>
      <dv-border-box-9 class="border-box">
        <div class="chart-text">近1天交易金额排名前10股票信息</div>
        <dv-scroll-ranking-board :config="config3" class="charts" style="height:300px"/>
      </dv-border-box-9>

    </div>
    <div class="box center">
      <div id="timeDisplay" class="time-display">
        当前时间: {{ allData.data10[0] }}
      </div>
        <div id="map"></div>
      <div class="bottom-container">
<!--      <dv-digital-flop :config="config01" style="width:200px;height:50px;" />-->
      <dv-border-box-9 style="width: 300px; height: 300px;">
        <div class="chart-text">
          处理速度:
          <span class="data-box">{{ speed }}条/s</span>
        </div>
        <div class="chart-text">
          交易热区:
          <span class="data-box">上海：{{ this.allData.data18[8] }}条</span>
        </div>
        <div class="chart-text">
          交易热区:
          <span class="data-box">广州：{{ this.allData.data18[9] }}条</span>
        </div>
        <div class="chart-text">
          交易热区:
          <span class="data-box">北京：{{ this.allData.data18[14] }}条</span>
        </div>
        <div class="chart-text">
          交易热区:
          <span class="data-box">浙江：{{ this.allData.data18[21] }}条</span>
        </div>
      </dv-border-box-9>
      <dv-border-box-9 style="width: 550px; height: 300px;">

      <dv-capsule-chart :config="config111" style="width:550px;height:300px" />
      </dv-border-box-9>
      </div>
    </div>
    <div class="box right">

<!--      <dv-border-box-8 :reverse="true" class="border-box">-->
<!--        <dv-conical-column-chart :config="config6" class="charts" style="height:350px;" />-->
<!--      </dv-border-box-8>-->
<!--      <dv-border-box-1 class="border-box">-->
<!--        <dv-capsule-chart :config="config7" class="charts" style="height:300px" />-->
<!--      </dv-border-box-1>-->
      <dv-border-box-8 class="border-box">
        <div class="chart-text">近1分钟交易金额排名前10股票平台</div>
        <dv-scroll-board :config="config7" class="charts" style="height:300px" />
      </dv-border-box-8>
      <dv-border-box-9 class="border-box">
        <dv-decoration-7 class="decoration ">近1分钟信息</dv-decoration-7>
        <div class="chart-text">
          总交易金额:
          <span class="data-box">{{ allData.data9[1] + '元' || '无数据' }}</span>
        </div>
        <div class="chart-text">
          交易数量:
          <span class="data-box">{{ allData.data9[2] + '单' || '无数据' }}</span>
        </div>
        <div class="chart-text">
          买入交易量:
          <span class="data-box">{{ allData.data11[1] + '单' || '无数据' }}</span>
        </div>
        <div class="chart-text">
          卖出交易量:
          <span class="data-box">{{ allData.data11[2] + '单' || '无数据' }}</span>
        </div>
      </dv-border-box-9>
      <dv-border-box-9 class="border-box">
        <div class="chart-text">近1分钟交易金额排名前10股票信息</div>
        <dv-scroll-ranking-board :config="config0" class="charts" style="height:300px" />
      </dv-border-box-9>
    </div>

  </dv-full-screen-container>
</template>
<script>
import * as echarts from 'echarts';
import chinaJson from '../assets/china.json'; // 引入地图json文件
import axios from "axios";

export default {
  name: 'ChinaMap',

  data()  {
    return {
      chart : null,
      speed:0,
      allData: {
        code:[133612, 378187, 299359, 429947, 288825, 568752, 683406, 261858, 223557, 299056],
        platform:["国泰君安证券", "通达信", "长城证券", "同花顺", "银河证券", "国联证券"],
        newdata1:null,
        data1: null,
        data2: null,
        data4: null,
        data5: null,
        data6: null,
        data9:[],
        data10:[],
        data11:[],
        data12:[],
        data13:[],
        data14:[],
        data15:[],
        data16:[],
        data17:[],
        data18:[],
        data19:[],
      }, // 用于存储所有接口返回的数据
      fetchCount: 0, // 用于存储数据获取的次数
      config0:{

      },
      config111:{
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          }
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true
      },
      config01:{
        number: [100],
        content: '速度：{nt}/s'
      },
      config1:{

      },
      config2:{
        header:['平台','总量']
    },
      config3:{

      },
      config4:{

      },
      config5:{
        points: [
          {
            name: '郑州',
            coordinate: [0.57, 0.42],
            icon: {
              src: require('@/assets/logo.png'),
              width: 30,
              height: 30
            },
            text: {
              color: '#fb7293'
            }
          },
          {
            name: '新乡',
            coordinate: [0.52, 0.23]
          },
          {
            name: '焦作',
            coordinate: [0.43, 0.29]
          },
          {
            name: '开封',
            coordinate: [0.59, 0.35]
          },
          {
            name: '许昌',
            coordinate: [0.53, 0.47]
          },
          {
            name: '平顶山',
            coordinate: [0.45, 0.54]
          },
          {
            name: '洛阳',
            coordinate: [0.36, 0.38]
          },
          {
            name: '周口',
            coordinate: [0.62, 0.55]
          },
          {
            name: '漯河',
            coordinate: [0.56, 0.56]
          },
          {
            name: '南阳',
            coordinate: [0.37, 0.66]
          },
          {
            name: '信阳',
            coordinate: [0.55, 0.81]
          },
          {
            name: '驻马店',
            coordinate: [0.55, 0.67]
          },
          {
            name: '济源',
            coordinate: [0.37, 0.29]
          },
          {
            name: '三门峡',
            coordinate: [0.20, 0.36]
          },
          {
            name: '商丘',
            coordinate: [0.76, 0.41]
          },
          {
            name: '鹤壁',
            coordinate: [0.59, 0.18]
          },
          {
            name: '濮阳',
            coordinate: [0.68, 0.17]
          },
          {
            name: '安阳',
            coordinate: [0.59, 0.10]
          }
        ],
        lines: [
          {
            source: '新乡',
            target: '郑州'
          },
          {
            source: '焦作',
            target: '郑州'
          },
          {
            source: '开封',
            target: '郑州'
          },
          {
            source: '许昌',
            target: '郑州'
          },
          {
            source: '平顶山',
            target: '郑州'
          },
          {
            source: '洛阳',
            target: '郑州'
          },
          {
            source: '周口',
            target: '郑州'
          },
          {
            source: '漯河',
            target: '郑州'
          },
          {
            source: '南阳',
            target: '郑州'
          },
          {
            source: '信阳',
            target: '郑州'
          },
          {
            source: '驻马店',
            target: '郑州'
          },
          {
            source: '济源',
            target: '郑州'
          },
          {
            source: '三门峡',
            target: '郑州'
          },
          {
            source: '商丘',
            target: '郑州'
          },
          {
            source: '鹤壁',
            target: '郑州'
          },
          {
            source: '濮阳',
            target: '郑州'
          },
          {
            source: '安阳',
            target: '郑州'
          }
        ],
        icon: {
          show: true,
          src: require('@/assets/logo.png')
        },
        text: {
          show: true,
        },
        bgImgSrc: require('@/assets/logo.png')
      },
      config6:{
        data:[]
      },
      config7:{
        data:[]
      }

    }
  },

  created() {
    this.startDataFetching();
  },
  beforeDestroy() {
    this.stopDataFetching();
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initMap(); // 确保 DOM 已经渲染
    //   this.fetchMapData(); // 获取地图数据
    // });
  },
  methods: {
    initMap() {
      this.chart = echarts.init(document.getElementById('map'));
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}',
        },
        visualMap: {
          inRange: {
            color: ['#e0ffff', '#006edd'],
          },
        },
        series: [
          {
            name: '中国地图',
            type: 'map',
            mapType: 'china',
            zoom: 1.2, // 初始缩放比例
            roam: false, // 是否允许缩放和拖动
            data: [], // 初始数据为空
            label: {
              show: true,
              color: '#2e41a1', // 标签颜色
              fontSize: 10, // 字体大小
            },
          },
        ],
      };

      if (chinaJson) {
        echarts.registerMap('china', chinaJson);
        this.chart.setOption(option);
      } else {
        console.error('China JSON data is not loaded');
      }
    },
    fetchData1() {
      axios.get('http://localhost:8082/getdata1')
          .then(response => {
            this.allData.data1 = response.data;
          })
          .catch(error => {
            console.error('请求 getdata1 失败:', error);
            this.allData.data1 = null;
          });
    },
    fetchData2() {
      axios.get('http://localhost:8082/getdata2')
          .then(response => {
            // console.log(response.data[0])
            this.allData.data2 = response.data;
          })
          .catch(error => {
            console.error('请求 getdata2 失败:', error);
            this.allData.data2 = null;
          });
    },
    // fetchData4() {
    //   axios.get('http://localhost:8082/getdata4')
    //       .then(response => {
    //         // this.$set(this.config0, 'data', response.data.map(item => ({
    //         //   name: item.value,
    //         //   value: item.score
    //         // })));
    //         this.config0 = {
    //           ...this.config0, // 保留原有的配置
    //           data: response.data.map(item => ({
    //             name: item.value,
    //             value: item.score
    //         }))}
    //
    //         // console.log(response.data)
    //       })
    //
    //       .catch(error => {
    //         console.error('请求 getdata4 失败:', error);
    //         this.allData.data4 = null;
    //       });
    // },
    // fetchData5() {
    //   axios.get('http://localhost:8082/getdata5')
    //       .then(response => {
    //         // 将获取到的数据转换为新的数组格式
    //         const newData = response.data.map(item => ({
    //           name: item.value,
    //           value: item.score
    //         }));
    //
    //         // 使用扩展运算符生成新的 config3 对象
    //         this.config3 = {
    //           ...this.config3, // 保留原有的配置
    //           data: newData // 更新为新的数据
    //         };
    //
    //         // 打印数据以确认更新
    //         console.log(this.config3.data); // 这里应该能看到新的数据
    //       })
    //       .catch(error => {
    //         console.error('请求 getdata5 失败:', error);
    //         this.allData.data5 = null;
    //       });
    // },
    fetchData6() {
      axios.get('http://localhost:8082/getdata6')
          .then(response => {
            // 将获取到的数据转换为二维数组格式
            const newData = response.data.map(item => [
              item._1, // 行1列1
              item._2, // 行1列2
            ]);

            // 使用完整的对象更新
            this.config6 = {
              ...this.config6, // 保留原有的配置
              data: newData, // 更新为二维数组
              header: ['平台', '总量'], // 确保 header 被设置
              index: true,
              columnWidth: [50],
              align: ['center'],
              carousel: 'page', // 确保启用分页滚动
            };
          })
          .catch(error => {
            console.error('请求 getdata6 失败:', error);
            this.allData.data6 = null;
          });
    },
    fetchData7() {
      axios.get('http://localhost:8082/getdata7')
          .then(response => {
            // 将获取到的数据转换为二维数组格式
            const newData = response.data.map(item => [
              item._1, // 行1列1
              item._2, // 行1列2
            ]);

            // 使用完整的对象更新
            this.config7 = {
              ...this.config7, // 保留原有的配置
              data: newData, // 更新为二维数组
              header: ['平台', '总量'], // 确保 header 被设置
              index: true,
              columnWidth: [50],
              align: ['center'],
              carousel: 'page', // 确保启用分页滚动
            };
          })
          .catch(error => {
            console.error('请求 getdata7 失败:', error);
            this.allData.data7 = null;
          });
    },
    fetchData9() {
      axios.get('http://localhost:8082/getdata9')
          .then(response => {
            const data = response.data;
            // 假设原始数据都是字符串，先转换为浮点数，再保留三位小数
            this.allData.data10[0] = data[3 * this.fetchCount + 0];
            this.allData.data10[1] = parseFloat(data[3 * this.fetchCount + 1]);
            this.allData.data10[2] = parseFloat(data[3 * this.fetchCount + 2]);

            // 转换为三位小数的字符串
            this.allData.data10[0] = this.allData.data10[0];
            this.allData.data10[1] = this.allData.data10[1].toFixed(3);
            this.allData.data10[2] = this.allData.data10[2].toFixed(3);

            if(this.fetchCount <= 60){
              this.allData.data9[0] = parseFloat(data[3 * this.fetchCount + 0]);
              this.allData.data9[1] = parseFloat(data[3 * this.fetchCount + 1]);
              this.allData.data9[2] = parseFloat(data[3 * this.fetchCount + 2]);

              // 转换为三位小数的字符串
              this.allData.data9[0] = this.allData.data9[0].toFixed(3);
              this.allData.data9[1] = this.allData.data9[1].toFixed(3);
              this.allData.data9[2] = this.allData.data9[2].toFixed(3);
            } else {
              // 计算差值并转换为浮点数
              const diff1 = parseFloat(data[3 * this.fetchCount + 1]) - parseFloat(data[3 * (this.fetchCount - 60) + 1]);
              const diff2 = parseFloat(data[3 * this.fetchCount + 2]) - parseFloat(data[3 * (this.fetchCount - 60) + 2]);

              // 转换为三位小数的字符串
              this.allData.data9[0] = parseFloat(data[3 * this.fetchCount + 0]).toFixed(3);
              this.allData.data9[1] = diff1.toFixed(3);
              this.allData.data9[2] = diff2.toFixed(3);
            }
          })
          .catch(error => {
            console.error('请求 getdata9 失败:', error);
            this.allData.data9 = null;
          });
    },
    fetchData10() {
      axios.get('http://localhost:8082/getdata10')
          .then(response => {
            this.allData.data12[0] = response.data[3 * this.fetchCount + 0];
            this.allData.data12[1] = response.data[3 * this.fetchCount + 1];
            this.allData.data12[2] = response.data[3 * this.fetchCount + 2];
            if(this.fetchCount<=60){
              this.allData.data11[0] = response.data[3 * this.fetchCount + 0];
              this.allData.data11[1] = response.data[3 * this.fetchCount + 1];
              this.allData.data11[2] = response.data[3 * this.fetchCount + 2];
            }
            else{
              this.allData.data11[0] = response.data[3 * this.fetchCount + 0];
              this.allData.data11[1] = response.data[3 * this.fetchCount + 1]-response.data[3 * (this.fetchCount-60) + 1];
              this.allData.data11[2] = response.data[3 * this.fetchCount + 2]-response.data[3 * (this.fetchCount-60) + 2];
            }


          })
          .catch(error => {
            console.error('请求 getdata8 失败:', error);
            this.allData.data9 = null;
          });
    },
    fetchData11() {
      axios.get('http://localhost:8082/getdata11')
          .then(response => {
            // 更新data14数组，每次取11个数据项
            for (let i = 0; i < 11; i++) {
              this.allData.data14[i] = response.data[11 * this.fetchCount + i];
            }

            // 如果fetchCount小于或等于60，直接更新data13数组
            if (this.fetchCount <= 60) {
              for (let i = 0; i < 11; i++) {
                this.allData.data13[i] = response.data[11 * this.fetchCount + i];
              }
            }
            // 如果fetchCount大于60，更新data13数组，并对其中的部分数据进行累减
            else {
              for (let i = 0; i < 11; i++) {
                if (i === 0) { // 最后一个数据项不需要累减
                  this.allData.data13[i] = response.data[11 * this.fetchCount + i];
                } else { // 最后一个数据项直接赋值
                  this.allData.data13[i] = response.data[11 * this.fetchCount + i] - response.data[11 * (this.fetchCount - 60) + i];

                }
              }
            }

            // 构造newData，排除第一个元素（时间）
            const codes = [133612, 378187, 299359, 429947, 288825, 568752, 683406, 261858, 223557, 299056];
            const values = this.allData.data13.slice(1); // 跳过第一个元素
            const newData = codes.map((code, index) => ({
              name: `${code}`,
              value: values[index] // 使用跳过第一个元素后的values数组
            }));

            // 根据value对newData进行排序
            const sortedData = newData.sort((a, b) => b.value - a.value);
            this.config0 = {
              ...this.config0, // 保留原有的配置
              data: sortedData
            }
            const values14 = this.allData.data14.slice(1)
            const newData14 = codes.map((code, index) => ({
              name: `${code}`,
              value: values14[index]
            }));
            const sortedData14 = newData14.sort((a, b) => b.value - a.value);
            this.config3 = {
              ...this.config3, // 保留原有的配置
              data: sortedData14
            }
            // 打印sortedData或者根据需要进行其他操作
            console.log(sortedData);
          })
          .catch(error => {
            console.error('请求 getdata11 失败:', error);
            this.allData.data11 = null; // 这里假设您想要将data11设置为null
          });
    },
    fetchData12() {
      axios.get('http://localhost:8082/getdata12')
          .then(response => {
            // 更新data16数组，每次取7个数据项
            for (let i = 0; i < 7; i++) {
              this.allData.data16[i] = response.data[7 * this.fetchCount + i];
            }

            // 如果fetchCount小于或等于60，直接更新data15数组
            if (this.fetchCount <= 60) {
              for (let i = 0; i < 7; i++) {
                this.allData.data15[i] = response.data[7 * this.fetchCount + i];
              }
            }
            // 如果fetchCount大于60，更新data15数组，并对其中的部分数据进行累减
            else {
              for (let i = 0; i < 7; i++) {
                if (i === 0) { // 第一个数据项不需要累减，直接赋值
                  this.allData.data15[i] = response.data[7 * this.fetchCount + i];
                } else { // 其他数据项进行累减
                  this.allData.data15[i] = response.data[7 * this.fetchCount + i] - response.data[7 * (this.fetchCount - 60) + i];
                }
              }
            }

            // 构造newData15和newData16，排除第一个元素（时间）并保留三位小数
            const platforms = ["国泰君安证券", "通达信", "长城证券", "同花顺", "银河证券", "国联证券"];
            const values15 = this.allData.data15.slice(1)
            const values16 = this.allData.data16.slice(1)
            const newData15 = values15.map((value, index) => [platforms[index], value]);
            const newData16 = values16.map((value, index) => [platforms[index], value]);
            const sortedData15 = newData15.sort((a, b) => b[1] - a[1]);
            const sortedData16 = newData16.sort((a, b) => b[1] - a[1]);
            // 更新配置
            this.config7 = {
              ...this.config7,
              data: sortedData15, // 更新为二维数组
              header: ['平台', '总量'], // 确保 header 被设置
              index: true,
              columnWidth: [150, 100], // 根据需要调整宽度
              align: ['center', 'right'], // 平台居中，总量靠右
              carousel: 'page', // 确保启用分页滚动
            };
            // 假设您有一个config6配置，用于data16的排序数据
            this.config6 = {
              ...this.config6,
              data: sortedData16, // 更新为二维数组
              header: ['平台', '总量'], // 确保 header 被设置
              index: true,
              columnWidth: [150, 100], // 根据需要调整宽度
              align: ['center', 'right'], // 平台居中，总量靠右
              carousel: 'page', // 确保启用分页滚动
            };

            // 打印newData或者根据需要进行其他操作
            console.log(newData15);
            console.log(newData16);
          })
          .catch(error => {
            console.error('请求 getdata12 失败:', error);
            this.allData.data15 = null; // 这里假设您想要将data15设置为null
          });
    },
    fetchData13() {
      axios.get('http://localhost:8082/getdata13')
          .then(response => {
            this.speed = response.data[this.fetchCount];

          })
          .catch(error => {
            console.error('请求 getdata8 失败:', error);
            this.allData.data17 = null;
          });
    },
    fetchData14() {
      axios.get('http://localhost:8082/getdata14')
          .then(response => {
            // this.allData.data18 = response.data[this.fetchCount]; // 存储data8的数据
            for (let i = 0; i < 32; i++) {
              this.allData.data18[i] = response.data[32 * this.fetchCount + i];
            }// 存储data8的数据
          })
          .catch(error => {
            console.error('请求 getdata8 失败:', error);
            this.allData.data18 = null;
          });
    },
    fetchData15() {
      axios.get('http://localhost:8082/getdata15')
          .then(response => {
            for (let i = 0; i < 8; i++) {
              this.allData.data19[i] = response.data[8 * this.fetchCount + i];
            }
            const newdata = this.allData.data19.slice(1)
            const inds = ["综合", "制造业", "金融业", "租赁和商务服务业", "农林牧渔业", "电力、热力生产和供应业", "建筑业"]
            let transformedData = [];

            // 遍历inds数组，每两个元素一组（城市名称和对应的值）
            for (let i = 0; i < inds.length; i++) {
              // 检查newdata中是否有足够的数据
              if (i + 1 < newdata.length) {
                // 构建新的对象并添加到transformedData数组中
                transformedData.push({
                  name: inds[i],
                  value: newdata[i]
                })
              }
            }
            this.config111 = {
              ...this.config111,
              data: transformedData,
              colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
              unit: '单位',
              showValue: true
            }
          })

          .catch(error => {
            console.error('请求 getdata8 失败:', error);
            this.allData.data17 = null;
          });
    },
    updateMapData(dataList) {
      const provincedata=[
        "西藏自治区",
        "福建省",
        "海南省",
        "宁夏回族自治区",
        "贵州省",
        "重庆市",
        "江西省",
        "上海市",
        "广东省",
        "湖南省",
        "湖北省",
        "云南省",
        "广西壮族自治区",
        "北京市",
        "安徽省",
        "四川省",
        "甘肃省",
        "陕西省",
        "内蒙古自治区",
        "山东省",
        "浙江省",
        "江苏省",
        "青海省",
        "辽宁省",
        "天津市",
        "新疆维吾尔自治区",
        "吉林省",
        "黑龙江省",
        "河南省",
        "山西省",
        "河北省"]
      // const mapData = dataList.map(item => ({
      //   name: item.field,
      //   value: parseInt(item.value, 10),
      // }));
      const mapData = provincedata.map((province, index) => {
        return {
          name: province,
          value: dataList[index] // 使用相同索引的值
        };
      });
      this.chart.setOption({
        series: [
          {
            data: mapData,
          },
        ],
      });
    },
    fetchMapData() {
      axios.get('http://localhost:8082/getdata14').then(response => {
        for (let i = 0; i < 32; i++) {
          this.allData.data18[i] = response.data[32 * this.fetchCount + i];
        }// 存储data8的数据
        const dataList = this.allData.data18.slice(1);
        console.log(dataList)
        this.updateMapData(dataList);
      }).catch(error => {
        console.error('获取地图数据失败:', error);
      });
    },
    startDataFetching() {
      this.intervalId = setInterval(() => {
        this.fetchData1();
        this.fetchData2();
        // this.fetchData4();
        // this.fetchData5();
        // this.fetchData6();
        // this.fetchData7();
        this.initMap();
        this.fetchMapData();
        this.fetchData9();
        this.fetchData10();
        this.fetchData11();
        this.fetchData12();
        this.fetchData13();
        this.fetchData15();
        this.fetchCount++; // 每次获取数据时增加获取次数
      }, 1000); // 每隔1000毫秒（1秒）执行一次
    },
    stopDataFetching() {
      clearInterval(this.intervalId);
    }
  }
}
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: row;
  background-color: #01132C;
}

.left, .right {
  width: 25%;
}

.center {
  width: 50%;
}

.box {
  display: flex;
  flex-direction: column;
}

.charts {
  width: 90%;
  margin: 5%;
}
.border-box .chart-text {
  color: white; /* 字体颜色 */
  background: linear-gradient(90deg, #00f, #0ff); /* 蓝色渐变 */
  -webkit-background-clip: text; /* 仅在文本上显示背景 */
  -webkit-text-fill-color: transparent; /* 使文本填充透明 */
  font-size: 1.5em; /* 增加字体大小 */
  padding: 10px; /* 添加内边距 */
  border-radius: 5px; /* 添加圆角 */
}
.decoration {
  width: 150px; /* 设置宽度 */
  height: 30px; /* 设置高度 */
  margin: 0 auto; /* 水平居中 */
  text-align: center; /* 水平居中 */
  line-height: 30px; /* 垂直居中 */
  border-radius: 5px; /* 可选: 圆角 */
  color: white; /* 字体颜色 */
  background: linear-gradient(90deg, #00f, #0ff); /* 蓝色渐变 */
  -webkit-background-clip: text; /* 仅在文本上显示背景 */
  -webkit-text-fill-color: transparent; /* 使文本填充透明 */

}
.chart-text {
  font-size: 1.2em; /* 增加字体大小 */
  margin: 15px 0; /* 上下间距 */
  color: white; /* 字体颜色 */
}

.data-box {
  display: inline-block; /* 使其成为块级元素 */
  background-color: rgba(0, 128, 255, 0.2); /* 半透明蓝色背景 */
  border: 1px solid #00f; /* 蓝色边框 */
  border-radius: 5px; /* 圆角 */
  padding: 5px 10px; /* 内边距 */
  margin-left: 5px; /* 左侧间距 */
  font-weight: bold; /* 加粗字体 */
  font-family: 'Roboto', sans-serif; /* 使用现代字体 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* 添加阴影 */
}
#map {
  width: 100%; /* 或者设置为具体的像素值 */
  height: 1000px; /* 确保有高度 */

}
.time-display {
  position: relative;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  color: white; /* 白色文字 */
  padding: 10px; /* 内边距 */
  text-align: center; /* 文本居中 */
  font-size: 1.2em; /* 字体大小 */
  margin-bottom: 10px; /* 下边距 */
}
.bottom-container {
  display: flex;
  width: 100%; /* 底部容器宽度占满中间部分 */
  justify-content: space-between; /* 子元素两端对齐 */
  margin-top: 20px; /* 与地图间隔 */
}

</style>
